<template>
  <div>
    <div class="alls">
      <div v-for="(item, index) in lists" :key="index" class="all">
        <a :href='item.url' class="find-body-alls">
          <p class="p1">{{item.corner_marker}}</p>
          <img :src="formatImage(item.image_hash)" alt>
          <div>
            <p class="p2">{{item.title}}</p>
            <span>
              {{item.points_required}}金币
              <s>￥{{item.points_required}}</s>
            </span>
          </div>
        </a>
      </div>
    </div>
    <div class="show-more">
      <p>查看更多 ></p>
    </div>
  </div>
</template>

<script>
import { formatImage } from "../../modules/unit";

export default {
  data() {
    return {
      lists: []
    };
  },
  methods: {
    formatImage
  },
  created() {
    var that = this;
    this.$axios.get("/api/restapi/member/gifts/suggest").then(res => {
      let datas = res.data;
      that.lists = datas;
      // console.log('****************************')
      // console.log(datas[0].url);
    });
  }
};
</script>

<style scoped>
.alls {
  display: flex;
  padding: 3.2vw;
  font-size: 12px;
}
.all {
  width: 29.6vw;
  padding-right: 3.2vw;
}
.find-body-alls {
  display: inline-block;
  text-decoration: none;
}
img {
  width: 29.6vw;
  height: 29.6vw;
  margin-bottom: 4vw;
}
p {
  margin: 0;
}
.p1 {
  display: inline-block;
  color: #fff;
  background-color: #413d3c;
}
.p2 {
  margin-bottom: 2.4vw;
  color: #333;
}
span {
  color: #ff5339;
}
s {
  color: #aaa;
}
.show-more {
  font-size: 3.2vw;
  color: #999;
  text-align: center;
  margin: 4vw 0;
}
</style>
